<template>
  <van-collapse v-model="activeNames" @change="changeCollapseIcon" :accordion="isOpenAccordion">
    <van-collapse-item name="1" :is-link="false">
      <div slot="title" class="titleSize">{{title}}</div>
      <div slot="right-icon"><img class="rightIcon" :src="rightIcon"></div>
      <div class="buttonFather">
        <about-us-button @changeScroll="changeScroll" v-for="(list,index) in companyClassList" :key="index" :aboutUsInfo="list"
                                    :direction="((index%2)==0)?'left':'right'"/>
      </div>
    </van-collapse-item>
  </van-collapse>
</template>

<script>
  import aboutUsButton from '@/components/commonComponents/aboutUs_button'
    export default {
        name: "AboueUs",
      props:{
        title:String,
        companyClassList:{},
      },
      data(){
        return{
          rightIcon:require('@/assets/collapseIcon/collapse_+.png'),
          isOpenAccordion:true,
          openIcon:require('@/assets/collapseIcon/collapse_+.png'),
          closeIcon:require('@/assets/collapseIcon/collapse_-.png'),
          collapseIcon:require('@/assets/collapseIcon/collapse_+.png'),
          activeNames:'0',
          isLink:false,
          AboveUsClass:[
            {
              url:'/CompanyProfileIndex',
              aboutText:'CompanyProfile',
            },
            {
              url:'/brandIndex',
              aboutText:'DevelopmentStory',
            },
            {
              url:'/brandIndex',
              aboutText:'BrandStory',
            },
            {
              url:'/theNewsList',
              aboutText:'CompanyNews',
            },
          ]
        }
      },
      methods:{
        changeScroll(){
          this.$emit('changeScroll');
        },
        changeCollapseIcon(){
          if(this.isOpen){
            this.rightIcon=this.openIcon;
          }else{
            this.rightIcon=this.closeIcon;
          }
          this.isOpen=!this.isOpen;
        },
        getText(text){
          let str = 'aboutUs.'+text;
          return this.$t(str);
        }
      },
      components:{
        aboutUsButton:aboutUsButton,
      }
    }
</script>

<style scoped>
  .van-collapse{
    overflow: hidden;
  }
  .buttonFather{
    background: #FFF;
    overflow: hidden;
  }
  .van-collapse-item{
    text-align: left;
  }
  .van-cell:not(:last-child)::after{
    border:0;
  }
  .rightIcon{
    width: 20px;
    vertical-align: middle;
  }
  .titleSize{
    font-size:16px;
    font-weight: bold;
  }
</style>
